<template>
	<view>
		<map :latitude="state.latitude" :longitude="state.longitude" style="width: 100%; height: 100vh;"
			:markers="state.covers" :show-compass="true" @markertap="markertap" @regionchange="regionchange"
			:enable-traffic="true" show-location
			>
		</map>
		
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	const state = reactive({
		id: 0, // 使用 marker点击事件 需要填写id
		title: 'map',
		latitude: "39.909",
		longitude: "116.39742",
		covers: [{
				id: 1,
				latitude: 39.909,
				longitude: 116.39742,
				iconPath: '/static/image/daoshi.png', // 注意路径前缀可能需要调整
				width: 35, // 数值类型不需要引号
				height: 35
			},
			{
				id: 2,
				latitude: 10.909,
				longitude: 116.39742,
				iconPath: '/static/image/daoshi.png', // 注意路径前缀可能需要调整
				width: 35,
				height: 35
			}
		]
	});

	// 定义方法
	const markertap = (e) => {
		console.log(e.detail.markerId); // 获取被点击的marker的id
	};

	const regionchange = (e) => {
		console.log(e.type); // 输出地图变化的类型（开始或结束）
	};

	// 获取当前位置的经度和纬度
	onMounted(() => {
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				console.log('当前位置的经度' + res.longitude);
				console.log('当前位置的纬度' + res.latitude);
				state.longitude = res.longitude;
				state.latitude = res.latitude;
			},
			fail: (err) => {
				console.error('获取位置失败', err);
			}
		});
	});
</script>